<template>
  <div>
    <el-container>
      <el-main>
        <el-container>
          <el-header class="header" style="padding: 0;">
            <el-form :inline="true">
              <el-form-item label="公众号" prop="appId">
                <el-select v-model="formData.appId" placeholder="选择公众号">
                  <el-option v-for="item in defaultPublicAccount" :key="item.appId" :label="item.publicAccountNickname" :value="item.appId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="search">查询</el-button>
                <el-button type="primary" @click="addDeatil">新增白名单</el-button>
              </el-form-item>
            </el-form>
          </el-header>
        </el-container>
        <el-table :data="blackList" style="width: 100%">
          <el-table-column label="openid" prop="openId"></el-table-column>
          <el-table-column label="公众号" prop="appId">
            <template slot-scope="scope">
              {{ changeappid(scope.row.appId) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="270">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="delBalck(scope.row.id)">解除白名单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            background
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
            :current-page="this.groupCollectionPage.page + 1"
            :page-sizes="[10, 20, 100, 300, 400]"
            :page-size="20"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.groupCollectionPage.totalElement">
          </el-pagination>
        </div>
      </el-main>
      <!-- 新增黑名单 -->
      <el-dialog title="新增白名单" :visible.sync="dialogFormVisible" top="13vh">
        <el-form :model="groupCollection" ref="groupCollection">
          <el-form-item label="公众号" :label-width="formLabelWidth" prop="appId">
            <el-select v-model="groupCollection.appId" placeholder="选择公众号">
              <el-option v-for="item in defaultPublicAccount" :key="item.appId" :label="item.publicAccountNickname" :value="item.appId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="openid" :label-width="formLabelWidth" prop="dataUrl">
            <el-input type="textarea" :rows="6" v-model="openIds" auto-complete="off" clearable></el-input>
            <div class="tips" style="line-height: 22px;margin-top: 15px;">可每行输入一个openid进行批量添加</div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="formSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
  import service from '../../../service/count';

  export default {
    data() {
      return {
        openIds: '',
        formData: {},
        publicNumberName: '',
        blackList: [],
        dialogFormVisible: false,
        formLabelWidth: '110px',
        defaultPublicAccount: [],
        groupCollection: {
          appId: '',
          dataUrl: ''
        },
        groupCollectionPage: {
          page: 0,
          size: 20,
          keyword: '',
          isActive: '',
          totalElement: 1,
        },
      };
    },
    mounted() {
      this.initData()
      this.initList()
    },
    computed: {
    },
    methods: {
      search(){
        this.formData.page = 0
        this.initList()
      },
      initData() {
        this.$store.dispatch('getPublicAccountsWithDefault', this.defaultPublicAccount).then((res) => {
          this.defaultPublicAccount = res;
          console.log(this.defaultPublicAccount)
        });
      },
      changeappid(appid) {
        let name
        this.defaultPublicAccount.map((item)=> {
          if(item.appId === appid) {
            name =  item.publicAccountNickname
          }
        })
        return name
      },
      initList() {
        this.formData.page = this.groupCollectionPage.page
        this.formData.size = this.groupCollectionPage.size
        service.whiteList(this.formData).then((res)=> {
          this.blackList = res.list
          this.groupCollectionPage.totalElement = res.total
        })
      },
      formSubmit() {
        this.groupCollection.openId = this.openIds.replace(/\n/g,',').trim()
        service.whiteCreate(this.groupCollection).then((res) => {
          this.$message({
            type: 'success',
            message: res
          });
          this.dialogFormVisible = false
          this.initList()
        });
      },
      delData(appId) {
        this.groupCollection = {
          appId: appId,
          dataUrl: ''
        }
        this.formSubmit()
      },
      addDeatil() {
        this.dialogFormVisible = true
        this.groupCollection = {
          appId: '',
          openId: ''
        }
        this.openIds = ''
      },
      delBalck(id) {
        this.$confirm('是否解除该黑名单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          service.whiteUpdate({
            id: id,
          }).then((res)=> {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.initList()
          })
        }).catch(() => {
        });
      },
      handlePageSizeChange(size) {
        this.groupCollectionPage.size = size;
        this.initList()
      },
      handleCurrentPageChange(page) {
        this.groupCollectionPage.page = page-1;
        this.initList()
      },
      close() {
        this.dialogFormVisible = false
      },
    },
  };
</script>

<style lang="less" scoped>
  .page {
    margin-top: 20px;
    text-align: right;
  }
  .avatar {
    width: 150px;
    height: 150px;
  }
</style>

